<template>
  <section>
    <!--员工信息-->
    <flexbox class="head">
      <div class="head-left">
       <img class="head-photo" v-bind:src="photo" alt width="100rem" height="100rem">
      </div>
      <div class="head-right">
        <p>{{userName}}({{staffID}})</p>
        <p>{{address}}({{job}})</p>
      </div>
    </flexbox>
    <!--员工信息 end-->
    <!--待办事项 and 我的假期-->
    <div class="user-info">
      <div class="left">
        <p>我的待办</p>
        <p>{{wait}}</p>
      </div>
      <div class="right">
        <p>我的假期</p>
        <p>{{holiday}}天</p>
      </div>
    </div>
    <!--待办事项 and 我的假期 end-->
    <!--nav-->
    <div>
    </div>
    <div class="d-flex">
      <div class="item" >
        <div @click="goChild('/apply/consortia')" class="iconfont icon-tianxie"></div>
        <div>申请入会</div>
      </div>
      <div class="item">
        <div @click="goChild('/rules/list')" class="iconfont icon-shiyongwendang"></div>
        <div>公会规章</div>
      </div>
      <div class="item">
        <div class="iconfont icon-lianxiren"></div>
        <div>公会联络表</div>
      </div>
      <div class="item">
        <div class="iconfont icon-money"></div>
        <div>经费申领</div>
      </div>
      <div class="item">
        <div class="iconfont icon-quanxianshenpi"></div>
        <div>审批作业</div>
      </div>
    </div>
    <!--nav end-->
    <!-- <div>
      <div>
        <img src="../assets/logo.png">
      </div>
      <div>
        <span><img style="border: 1px solid red;" width="40px" src="../assets/logo.png"></span>
        <span><img style="border: 1px solid red;" width="40px" src="../assets/logo.png"></span>
        <span><img style="border: 1px solid red;"  width="40px" src="../assets/logo.png"></span>
      </div>
      <div style="color: red; text-align: left">185</div>
      <div style="text-align: left">文字描述</div>
    </div> -->
  </section>
</template>

<script>
import { Flexbox, FlexboxItem, Grid, GridItem, Icon } from 'vux'
import * as api from '../api/api'
export default {
  components: {
    Flexbox,
    FlexboxItem,
    Grid,
    GridItem,
    Icon
  },
  data () {
    return {
      list: '../assets/logo.png',
      userName: '', // 员工姓名
      photo: 'http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg', // 员工头像
      staffID: '', // 工号
      job: '', // 职位
      address: '', // 店铺地址
      holiday: 0, // 剩余假期
      wait: '' // 我的待办
    }
  },
  berforeRouteEnter () {
    console.log('berforeRouteEnter')
  },
  created () {
    // console.log(this.$router.isBack)
    // if (this.$router.isBack === false) {
    //   return false
    // }
    api.getUser().then(res => {
      const data = res.data[0]
      this.$store.state.userInfo = data
      let {userName, photo, staffID, job, address, holiday, wait} = data
      this.userName = userName
      this.photo = photo
      this.job = job
      this.staffID = staffID
      this.address = address
      this.holiday = holiday
      this.wait = wait
      sessionStorage.setItem('token', staffID)
    })
  },
  methods: {
    // 前往子页面
    // url: 路由地址
    // params；传给子页面的参数
    goChild (url, params) {
      this.$router.push(url)
    }
  }
}
</script>
<style lang="less" scoped>

.head {
  color: @white;
  height: 12rem;
  display: flex;
  background-color: @blue;
}
.head-left {
  width: 120px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .head-photo {
    border: 1px solid @white;
    border-radius: 50%;
  }
}
.head-right {
  flex: 1;
  line-height: 3rem;
  font-size: @fsbig;
  p:last-child {
    font-size: @fssmall;
  }
}
.head-bottom {
  height: 40px;
}
.user-info {
  background-color: @blue1;
  color: @white;
  display: flex;
  .left {
    flex: 1;
    font-size: @fsbig;
    border-right: 1px solid @blue;
    p:last-child {
      font-size: @fssmall;
    }
  }
  .right {
    flex: 1;
    font-size: @fsbig;
    p:last-child {
      font-size: @fssmall;
    }
  }
}
.item {
  width: 33.24%;
  border-right: 1px solid @border_eee;
  border-bottom: 1px solid @border_eee;
  height: 120px;
  div:last-child {
    color: @blue2;
    font-size: @fsbig;
  }
}
.item:nth-child(3n+0) {
  border-right: 0px;
  flex: 1;
}
.iconfont {
  margin-top: 20px;
}
</style>
